<template>
  <div class="container">
    <span class="scroll-button container-left-btn vxe-icon-arrow-left" @click="leftScroll"></span>
    <div ref="stepRef" :style="cssVars" class="flow-box flex justify-start padding-xs step-panel bg-blue light" @wheel="horizontalScroll">
      <span v-for="(m, i) in tabs" :key="i">
        <!-- <FlowStepItemCompTree v-if="i===1" :title="m.nodeDictName" :itemStep="m" :isActive="m.isActive" @itemClick="itemClick" @addItemClick="addItemClick" :isShowNexrArrow="i<tabs.length-1" /> -->
        <FlowStepItemComp ref="flowStepItemCompRef" :title="m.nodeDictName" :itemStep="m" :isActive="m.isActive" @itemClick="itemClick" @addItemClick="addItemClick" :isShowNexrArrow="i<tabs.length-1" />
      </span>
    </div>
    <span class="scroll-button container-right-btn vxe-icon-arrow-right" @click="rightScroll"></span>
  </div>
</template>

<script setup lang="ts">
import { log } from 'console';
import { computed, onBeforeUnmount, reactive, ref, getCurrentInstance } from 'vue';
import FlowStepItemComp from './FlowStepItemComp.vue';
import { IsEmpty, formatDateTime, autoIncrementNumber } from '@/utils/common';

// import FlowStepItemCompTree from './FlowStepItemCompTree.vue';
let flowStepItemCompRef = ref(null);
let { proxy }: any = getCurrentInstance();
defineExpose({
  getAddFeeCnt
});
const props = defineProps({
  step: {
    type: Number,
    default: 1
  },
  tabs: {
    type: Array,
    default: reactive([
      {
        title: 'Step 1',
        iconSuccess: null,
        isValid: true
      },
      {
        title: 'Step 2',
        iconSuccess: null,
        isValid: true
      },
      {
        title: 'Step 3',
        iconSuccess: null,
        isValid: true
      }
    ])
  },
  finalize: {
    type: Function,
    default: function () {
      return {};
    }
  },
  backText: {
    type: String,
    default: 'Back'
  },
  nextText: {
    type: String,
    default: 'Next'
  },
  doneText: {
    type: String,
    default: 'Done'
  },
  loading: {
    type: Boolean,
    default: false
  },
  primaryColor1: {
    type: String,
    default: 'orange'
  },
  primaryColor2: {
    type: String,
    default: '#fff'
  },
  backgroundColor: {
    type: String,
    default: '#fff'
  },
  circleSize: {
    type: Number,
    default: 18
  }
});

const stepRef = ref(null);
let animationId: number | null = null;
const scrollStep = 100; // 每次滚动的距离

const cssVars = computed(() => {
  return {
    '--primaryColor1': props.primaryColor1,
    '--primaryColor2': props.primaryColor2,
    '--backgroundColor': props.backgroundColor,
    '--circleSize': `${props.circleSize}px`
  };
});

const incrementStep = () => {
  const step = props.step + 1;
  emit('update:step', step);
};

const decrementStep = () => {
  const step = props.step - 1;
  emit('update:step', step);
};

const steppyProgress = computed(() => {
  return (100 / (props.tabs.length - 1)) * (props.step - 1) + '%';
});

const circleStyles = computed(() => {
  return {
    height: `${props.circleSize}px`,
    width: `${props.circleSize}px`
  };
});

/**鼠标滚轮滚动 */
function horizontalScroll(e) {
  if (e.deltaY !== 0 && stepRef.value) {
    stepRef.value.scrollLeft += e.deltaY;
    e.preventDefault();
  }
}

/**向左滚动 */
function leftScroll() {
  if (stepRef.value && stepRef.value.scrollLeft && stepRef.value.scrollLeft <= 0) {
    stepRef.value.scrollLeft = 0;
    return;
  }
  scrollSmooth(-scrollStep);
}

/**向右滚动 */
function rightScroll() {
  if (stepRef.value && stepRef.value.scrollLeft && stepRef.value.scrollLeft <= 0) {
    stepRef.value.scrollLeft = 0;
    return;
  }
  scrollSmooth(scrollStep);
}

function scrollSmooth(distance: number) {
  const contentElem = stepRef.value;
  if (!contentElem) {
    return;
  }

  const startTime = performance.now();
  const startScroll = contentElem.scrollLeft;

  const animateScroll = (currentTime: number) => {
    const elapsedTime = currentTime - startTime;
    if (elapsedTime < 50) {
      // 滚动时间控制为0.5秒
      contentElem.scrollLeft = easeInOutCubic(elapsedTime, startScroll, distance, 50);
      animationId = requestAnimationFrame(animateScroll);
    } else {
      contentElem.scrollLeft += distance;
      cancelAnimationFrame(animationId!);
    }
  };

  const easeInOutCubic = (t: number, b: number, c: number, d: number) => {
    t /= d / 2;
    if (t < 1) return (c / 2) * t * t * t + b;
    t -= 2;
    return (c / 2) * (t * t * t + 2) + b;
  };

  animationId = requestAnimationFrame(animateScroll);
}

/**项点击事件 */
function itemClick(m) {
  proxy.$emit('itemClick', m);
}

/**添加节点事件触发 */
function addItemClick(m) {
  proxy.$emit('addItemClick', m);
}

onBeforeUnmount(() => {
  if (animationId) {
    cancelAnimationFrame(animationId);
  }
});

function getAddFeeCnt(data) {
  const i = props.tabs.findIndex((item: any) => item.pageCode == 'RptResultBac');
  flowStepItemCompRef.value[i]?.getAddFeeCnt(data);
}
</script>

<style scoped lang="scss">
$primary-1: var(--primaryColor1);
$primary-2: var(--primaryColor2);
$backgroundColor: var(--backgroundColor);

$transition: all 500ms ease;

.container {
  position: relative;
  overflow: hidden;
}

.scroll-button {
  top: 50%;
  z-index: 99;
  cursor: pointer;
  padding: 10px 10px;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0);
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgba(255, 255, 255, 0.005);
}

.scroll-button:hover {
  color: #fff;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.8);
}

.container-left-btn {
  left: 10px;
}

.container-right-btn {
  right: 10px;
}

.step-panel {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  &-progress {
    position: absolute;
    background-color: #c5c5c5;
    height: 2px;
    z-index: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;

    &-bar {
      position: absolute;
      left: 0;
      height: 100%;
      width: 0;
      background-color: $primary-1;
      transition: $transition;
    }
  }
}

.step-panel::-webkit-scrollbar {
  display: none; /* 隐藏滚动条（适用于Chrome、Safari等Webkit浏览器） */
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
